<template>
	<view>
		<cu-custom bgColor="bg-white" isBack="true">
			<block slot="content">积分商城</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="personinfo">
				<!-- 头像左边 -->
				<view class="avtor">
					<image :src="avatar" mode=""></image>
				</view>

				<!-- 用户名字与￥ -->
				<view class="user-info">
					<!-- 名字 -->
					<view class="user-name">{{ nickname }}</view>
					<!-- 积分 -->
					<view class="user-get">积分：{{ user_integral }}</view>
				</view>

				<!-- 积分明细和积分订单 -->
				<view class="jifenmingxi" @click="navigate('/pages/integral/integral')">
					<!-- 图片 -->
					<view class="jifenimg">
						<u-icon name="file-text" color="#333333" size="17"></u-icon>
					</view>
					<!-- 文字 -->
					<view class="jifenzi"> 积分明细 </view>
				</view>

				<!-- 订单 -->
				<view class="icon-order" @click="navigate('/pages/my_order/my_order')">
					<!-- 图片 -->
					<view class="order-icon">
						<u-icon name="order" color="#333333" size="17"></u-icon>
					</view>
					<!-- 子 -->
					<view class="order-zi">积分订单</view>
				</view>
			</view>
			<view class="viewbox"></view>
			<view class="index_a">
				<view class="header_wrap">
					<view class="header_wrap_b">
						<input placeholder="搜索商品" v-model="keyword"
							placeholder-style="font-size: 24rpx;font-family: PingFang SC;font-weight: 500;color: #BBBBBB;"
							@input="searchGoods" />
					</view>
					<view class="header_wrap_a">
						<u-icon name="search" color="#BBBBBB" size="16"></u-icon>
					</view>
				</view>
			</view>
			<view class="index_e">
				<GoodsList :list="goodsList" is_type="1"></GoodsList>
			</view>
			<loading-footer :status="status" :slot-empty="true">
				<view slot="empty" class="column-center" style="padding-top: 200rpx">
					<image class="img-null" src="/static/goods_null.png"></image>
					<text class="lighter">暂无记录</text>
				</view>
			</loading-footer>
		</view>
	</view>
</template>
<script>
	import request from "@/common/request.js";
	import {
		loadingType,
		trottle
	} from "@/utils/type";
	import {
		Ls
	} from "../../uview-ui/libs/util/dayjs";
	export default {
		data() {
			return {
				showLoading: true,
				uid: 0,
				goodsList: [],
				keyword: "",
				goodscategory_list: [],
				status: loadingType.LOADING,
				page: 1,
				limit: 8,
				avatar: "",
				nickname: "",
				user_integral: 0,
			};
		},
		onShareAppMessage(res) {
			//发送给朋友
			return {
				title: "",
				path: "/pages/home/vendor",
			};
		},
		onShareTimeline(res) {
			//分享到朋友圈
			return {
				title: "",
				path: "/pages/home/vendor",
			};
		},
		onShow() {
			this.uid = uni.getStorageSync("uid");
		},
		onReachBottom: function() {
			this.getGoodsListFun();
		},
		mounted() {
			this.onRefresh();
			this.getUserInfo();
		},
		methods: {
			navigate(url, type = 0) {
				if (!this.isLogin && type === 1) {
					return;
				}
				uni.navigateTo({
					url
				});
			},
			async getGoodsListFun() {
				let {
					page,
					limit,
					goodsList,
					status
				} = this;
				if (status == loadingType.FINISHED) return;
				const paramsList = {
					page: page,
					size: limit,
					uid: this.uid,
				};
				let optsList = {
					url: "g-goodslist",
					method: "post",
				};
				request.httpRequest(optsList, paramsList).then((res) => {
					if (res.data.code == 200) {
						if (page == 1) goodsList = [];
						let {
							list,
							more
						} = res.data.data;
						// console.log(list)
						this.goodsList.push(...list);
						this.page = ++page;
						if (!more) {
							this.status = loadingType.FINISHED;
						}
						if (this.goodsList.length <= 0) {
							this.status = loadingType.EMPTY;
						}
					} else {
						this.status = loadingType.ERROR;
					}
					this.showLoading = false;
				});
			},
			async searchGoods() {
				const paramsList = {
					keyword: this.keyword,
				};
				const optsList = {
					url: "g-search",
					method: "get",
				};
				trottle(() => {
					request.httpRequest(optsList, paramsList).then((res) => {
						if (res.data.code === 200) {
							this.goodsList = res.data.data.list;
						}
					});
				}, 2000)();
			},
			async getUserInfo() {
				let paramsList = {

					uid: this.uid

				};
				let optsList = {
					url: "u-role_config",
					method: "get",
				};
				request.httpRequest(optsList, paramsList).then((res) => {
					if (res.data.code === 200) {
						console.log(res.data.data);
						const data = res.data.data;
						this.nickname = data.nickname;
						this.avatar = data.avatar;
						this.user_integral = data.user_integral;
					}
				});
			},
			onRefresh() {
				this.page = 1;
				this.goodsList = [];
				this.status = loadingType.LOADING;
				this.$nextTick(() => {
					this.getGoodsListFun();
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.index_a {
		background-color: #ffffff;
		height: auto;
		width: 750rpx;
		overflow: hidden;
		padding: 25rpx;
	}

	.header_wrap {
		width: 100%;
		height: 72rpx;
		border: 1rpx solid #d9d9d9;
		border-radius: 34rpx;
	}

	.header_wrap_a {
		width: 40rpx;
		height: 40rpx;
		float: right;
		margin-top: 15rpx;
		margin-left: 30rpx;
		margin-right: 15rpx;
	}

	.header_wrap_b {
		width: 480rpx;
		height: 68rpx;
		float: left;
		margin-left: 20rpx;
	}

	.header_wrap_b input {
		width: 480rpx;
		height: 68rpx;
		line-height: 68rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.header_wrap_c {
		width: 124rpx;
		height: 58rpx;
		background: #0166df;
		border-radius: 29rpx;
		float: right;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		line-height: 58rpx;
		margin-top: 5rpx;
		margin-right: 5rpx;
		text-align: center;
	}

	.index_b {
		width: 750rpx;
		height: 320rpx;
	}

	.index_e {
		overflow: hidden;
	}

	.index_b_d_aaa {
		width: 750rpx;
		overflow: hidden;
		padding: 25rpx;
	}

	.personinfo {
		background: #ffffff;
		width: 100%;
		height: 80rpx;
		// border: 1px solid red;
		margin: 0 auto;
		display: flex;

		// 头像
		.avtor {
			width: 80rpx;
			height: 80rpx;
			// border: 1px solid red;
			border-radius: 50%;
			overflow: hidden;
			margin: 0 0 0 30rpx;	
			
			image {
				width: 100%;
				height: 100%;
			}
		}

		// 信息
		.user-info {
			margin: 0 0 0 24rpx;
			width: 200rpx;
			height: 80rpx;
			// border: 1px solid red;

			.user-name {
				width: 200rpx;
				height: 29rpx;
				line-height: 29rpx;
				// border: 1px solid red;
				margin: 10rpx 0 0 0;
				font-weight: 800;
				font-size: 30rpx;
				color: #000000;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			// 积分信息
			.user-get {
				width: 200rpx;
				height: 23rpx;
				// border: 1px solid red;
				line-height: 23rpx;
				color: #ff551a;
				font-weight: 500;
				font-size: 24rpx;
				margin: 16rpx 0 0 0;
			}
		}

		// 积分明细
		.jifenmingxi {
			width: 160rpx;
			height: 40rpx;
			line-height: 23rpx;
			// border: 1px solid red;
			margin: 50rpx 0 0 100rpx;
			display: flex;

			.jifenimg {
				width: 26rpx;
				height: 23rpx;
				line-height: 23rpx;
				// border: 1px solid red;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.jifenzi {
				width: 130rpx;
				height: 40rpx;
				line-height: 37rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
				padding-left: 13rpx;
			}
		}

		.icon-order {
			width: 160rpx;
			height: 40rpx;
			line-height: 26rpx;
			// border: 1px solid red;
			margin: 48rpx 0 0 0;
			display: flex;

			// 图片
			.order-icon {
				width: 26rpx;
				height: 26rpx;
				line-height: 26rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.order-zi {
				width: 130rpx;
				height: 40rpx;
				line-height: 37rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
				padding: 1rpx 0 0 13rpx;
			}
		}
	}
</style>